<template>
<view class="st-u-comment-subject-star">
  <view class="star-box">
    <view class="star-box-item st-flex" v-for="(item,index) in starDataList" :key="index" @tap="$emit('starItemClick',item)">
      <u-avatar @tap="$emit('avatarClick',item)" :src="item.ownerUserAvatar"></u-avatar>
      <text>{{item.ownerUserNickname}}</text>
    </view>
  </view>

  <stULoadmore ref="loadMore" :ready="loadStarData" @loadmore="loadStarData"></stULoadmore>
</view>
</template>

<script>

/**
 * 主体评论对应的点赞列表组件
 */

import CommentSubjectStarUrl from "../../../../pc/subject/CommentSubjectStarUrl.js";
import stULoadmore from '../../../../../../common/web/components/app/uni-app/uview/st-u-loadmore/st-u-loadmore.vue'
export default {
  components: {stULoadmore},
  props: {
    // 主体评论 id
    commentSubjectId: {
      type: String,
      required: true
    },
    // 分组标识
    groupFlag: {
      type: String
    }
  },
  data(){
    return {
      // 点赞数据
      starDataList: [],
      // 查询参数
      starQuery: {
        current: 1,
        commentSubjectId: this.commentSubjectId,
        groupFlag: this.groupFlag
      }
    }
  },
  methods: {
    // 加载数据
    loadStarData(refresh,callback=()=>{}) {
      if(!refresh && this.$refs.loadMore && !this.$refs.loadMore.canLoad()){
        if(callback){
          callback()
        }
        return
      }
      this.$http.get(CommentSubjectStarUrl.getPage1,{params:this.starQuery}).then(res => {
        if (this.starQuery.current == 1) {
          this.starDataList = []
        }
        res.data.records.forEach(item =>{
          this.starDataList.push(item)
        });
        this.starQuery.current = res.data.current + 1
        this.$refs.loadMore.loaded(res.data)
      }).catch((error)=>{
        this.$u.toast('抱歉系统出错误了')
        console.error(error)
        this.$refs.loadMore.loadError()
      }).finally(()=>{
        if(callback){
          callback()
        }
        })
    },
    // 刷新数据
    refreshStarData(callback=()=>{}){
      this.starQuery.current = 1
      this.loadStarData(true,callback)
    }
  }
}
</script>

<style lang="scss" scoped>
.st-u-comment-subject-star{
  .star-box .star-box-item{
    border-bottom: solid 2rpx $u-border-color;
    padding: 20rpx;
  }
}
</style>